<template>
  <div class="apply-container">
    <div class="w1200">
      <h3 class="form-title">入驻申请</h3>
      <el-form
        ref="applyForm"
        :model="applyForm"
        :rules="applyRules"
        label-width="0"
        class="apply-form"
        label-position="left">
        <el-form-item prop="name">
          <el-input v-model="applyForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input v-model="applyForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item prop="resource">
          <el-input v-model="applyForm.resource" placeholder="请输入您要供应的资源"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button round type="primary" size="medium" style="width: 150px" @click="handleSubmit" :loading="loading"
            >提交信息</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ApplyForm',
  data() {
    const validatePhone = (rule, value, callback) => {
      const reg = /^1[3-9]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('请输入有效的手机号'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      applyForm: { name: '', phone: '', resource: '' },
      applyRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur', validator: validatePhone }],
        resource: [{ required: true, message: '请输入您要供应的资源', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.applyForm.validate(async (valid) => {
        if (valid) {
          this.loading = true
          console.log(this.applyForm)
          try {
            const res = await this.$req('/application', 'post', this.applyForm)
            console.log('data: ', res)
            if (res.code === 20000) {
              this.loading = false
              this.$message({
                type: 'success',
                message: '提交成功'
              })
              this.$refs.applyForm.resetFields()
            }
          } catch (error) {
            this.loading = false
            console.log('error: ', error)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.apply-container {
  padding-top: 65px;
  height: 515px;
  background: url('@/assets/img/apply-bg.jpg') no-repeat center/cover;
  :deep(.el-input__inner) {
    height: 60px;
    line-height: 60px;
  }
}
.form-title {
  margin-bottom: 45px;
  border-left: 2px solid #333;
  padding-left: 20px;
  font-size: 30px;
  line-height: 36px;
  color: #333;
}
.apply-form {
  width: 500px;
}
</style>
